import $ from "./jquery.js"
import "./401.js"
import "../css/bannershow.css"
        $(function(){
            $.get('http://192.168.30.63:3000/banner/getBanners',function(res){
                console.log(res)
                res.result.forEach(item => {
                    let node=`<img src="http://192.168.30.63:3000/images/${item.filename}" alt="" />`
                    $('.list').append(node);
                    // console.log(index);
                    console.log(item.filename);
                });
            })
        })
    var imgCount = 5;
    var index = 1;
    var intervalId;
    var buttonSpan = $('.pointer')[0].children;//htmlCollection 集合
    //自动轮播功能 使用定时器
    autoNextPage();
    function autoNextPage() {
        intervalId = setInterval(function () {
            nextPage(true);
        }, 3000);
    }
    //当鼠标移入 停止轮播
    $('.container').mouseover(function () {
        // console.log('hah');
        clearInterval(intervalId);
    });
    // 当鼠标移出，开始轮播
    $('.container').mouseout(function () {
        autoNextPage();
    });
    //点击下一页 上一页的功能
    $('.left').click(function () {
        nextPage(true);
    });
    $('.right').click(function () {
        nextPage(false);
    });
    //小圆点的相应功能 事件委托
    clickButtons();
    function clickButtons() {
        var length = buttonSpan.length;
        for (var i = 0; i < length; i++) {
            buttonSpan[i].onclick = function () {
                $(buttonSpan[index - 1]).removeClass('on');
                if ($(this).attr('index') == 1) {
                    index = 5;
                } else {
                    index = $(this).attr('index') - 1;
                }
                nextPage(true);

            };
        }
    }
    function nextPage(next) {
        var targetLeft = 0;
        //当前的圆点去掉on样式
        $(buttonSpan[index - 1]).removeClass('on');
        if (next) {//往后走
            if (index == 5) {//到最后一张，直接跳到第一张
                targetLeft = 0;
                index = 1;
            } else {
                index++;
                targetLeft = -600 * (index - 1);
            }

        } else {//往前走
            if (index == 1) {//在第一张，直接跳到第五张
                index = 5;
                targetLeft = -600 * (imgCount - 1);
            } else {
                index--;
                targetLeft = -600 * (index - 1);
            }

        }
        $('.list').animate({ left: targetLeft + 'px' });
        //更新后的圆点加上样式
        $(buttonSpan[index - 1]).addClass('on');


    }


